<template>
	<view class="container">
		<view class="category-layout">
			<!-- 左侧一级分类 -->
			<scroll-view scroll-y class="category-menu">
				<view 
					v-for="(item, index) in categories" 
					:key="index" 
					class="menu-item" 
					:class="{ active: currentCategoryIndex === index }"
					@click="switchCategory(index)"
				>
					<text class="menu-text">{{ item.name }}</text>
				</view>
			</scroll-view>
			
			<!-- 右侧内容区域 -->
			<scroll-view scroll-y class="category-content" scroll-with-animation @scrolltolower="loadMore">
				<!-- 分类广告图 -->
				<image 
					v-if="currentCategory && currentCategory.banner" 
					:src="currentCategory.banner" 
					mode="aspectFill" 
					class="category-banner"
				></image>
				
				<!-- 子分类列表 -->
				<block v-if="currentCategory && currentCategory.children">
					<view class="subcategory-section">
						<view 
							v-for="(subItem, subIndex) in currentCategory.children" 
							:key="subIndex" 
							class="subcategory-group"
						>
							<view class="subcategory-title" v-if="subItem.name">{{ subItem.name }}</view>
							<view class="subcategory-list">
								<view 
									v-for="(thirdItem, thirdIndex) in subItem.children" 
									:key="thirdIndex" 
									class="subcategory-item"
									@click="goToProductList(thirdItem.id, thirdItem.name)"
								>
									<image :src="thirdItem.icon" mode="aspectFill" class="subcategory-icon"></image>
									<text class="subcategory-name">{{ thirdItem.name }}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
				
				<!-- 加载中提示 -->
				<view class="loading-more" v-if="isLoading">
					<uni-icons type="spinner-cycle" size="16" color="#999" class="loading-icon"></uni-icons>
					<text>加载中...</text>
				</view>
			</scroll-view>
		</view>
		
		<!-- 底部导航占位 -->
		<view class="tab-placeholder"></view>
		
		<!-- 注释掉自定义tabbar -->
		<!-- <custom-tabbar currentPage="category"></custom-tabbar> -->
	</view>
</template>

<script>
	import CustomTabbar from '@/components/custom-tabbar.vue'
	
	export default {
		components: {
			CustomTabbar
		},
		onLoad() {
			// 不再需要隐藏官方tabbar
			// uni.hideTabBar();
		},
		data() {
			return {
				currentCategoryIndex: 0,
				isLoading: false,
				categories: [
					{
						id: 1,
						name: '女装',
						banner: 'https://images.unsplash.com/photo-1567401893414-76b7b1e5a7a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHdvbWVucyUyMGZhc2hpb258ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=60',
						children: [
							{
								name: '当季热卖',
								children: [
									{
										id: 101,
										name: '连衣裙',
										icon: 'https://cbu01.alicdn.com/img/ibank/2020/210/915/13277519012_778880422.jpg'
									},
									{
										id: 102,
										name: 'T恤',
										icon: 'https://images.unsplash.com/photo-1562157873-818bc0726f68?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHRzaGlydHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 103,
										name: '衬衫',
										icon: 'https://images.unsplash.com/photo-1584030373081-f37b7bb4fa8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8c2hpcnR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 104,
										name: '休闲裤',
										icon: 'https://cbu01.alicdn.com/img/ibank/O1CN01keFhoR1eCTxEqDYyo_!!2212959003835-0-cib.jpg'
									}
								]
							},
							{
								name: '精选上装',
								children: [
									{
										id: 105,
										name: '针织衫',
										icon: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3dlYXRlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 106,
										name: '卫衣',
										icon: 'https://cbu01.alicdn.com/img/ibank/O1CN01L41d2y1fcPjKvBYxN_!!2214523024027-0-cib.jpg_460x460q100.jpg'
									},
									{
										id: 107,
										name: '西装',
										icon: 'https://images.unsplash.com/photo-1582274528667-1e8a10ded835?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8YmxhemVyfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
									}
								]
							}
						]
					},
					{
						id: 2,
						name: '男装',
						banner: 'https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fG1lbiUyMGZhc2hpb258ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=60',
						children: [
							{
								name: '当季热卖',
								children: [
									{
										id: 201,
										name: 'T恤',
										icon: 'https://images.unsplash.com/photo-1581655353564-df123a1eb820?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bWVucyUyMHRzaGlydHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 202,
										name: '衬衫',
										icon: 'https://images.unsplash.com/photo-1586363104862-3a5e2ab60d99?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8bWVuJTIwc2hpcnR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 203,
										name: 'POLO衫',
										icon: 'https://images.unsplash.com/photo-1598033129183-c4f50c736f10?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHBvbG8lMjBzaGlydHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
									}
								]
							},
							{
								name: '精选上装',
								children: [
									{
										id: 204,
										name: '卫衣',
										icon: 'https://images.unsplash.com/photo-1564557287817-3785e38ec1f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bWVucyUyMGhvb2RpZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 205,
										name: '西装',
										icon: 'https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bWVucyUyMHN1aXR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
									}
								]
							},
							{
								name: '裤装',
								children: [
									{
										id: 206,
										name: '休闲裤',
										icon: 'https://images.unsplash.com/photo-1541099649105-f69ad21f3246?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bWVucyUyMHBhbnRzfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 207,
										name: '牛仔裤',
										icon: 'https://cbu01.alicdn.com/img/ibank/O1CN010EhrMi1PJbsbpDk2c_!!3007911820-0-cib.jpg_460x460q100.jpg'
									}
								]
							}
						]
					},
					{
						id: 3,
						name: '鞋包',
						banner: 'https://images.unsplash.com/photo-1556906788-3198daffb946?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzZ8fHNob2VzJTIwYW5kJTIwYmFnc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60',
						children: [
							{
								name: '女鞋',
								children: [
									{
										id: 301,
										name: '平底鞋',
										icon: 'https://images.unsplash.com/photo-1491897554428-130a60dd4757?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzJ8fGZsYXQlMjBzaG9lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 302,
										name: '高跟鞋',
										icon: 'https://images.unsplash.com/photo-1543163521-1bf539c55dd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8aGlnaCUyMGhlZWxzfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
									}
								]
							},
							{
								name: '男鞋',
								children: [
									{
										id: 303,
										name: '商务鞋',
										icon: 'https://images.unsplash.com/photo-1614252235316-8c857d38b5f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bWVucyUyMGZvcm1hbCUyMHNob2VzfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 304,
										name: '休闲鞋',
										icon: 'https://images.unsplash.com/photo-1600269452121-4f2416e55c28?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c25lYWtlcnN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
									}
								]
							},
							{
								name: '箱包',
								children: [
									{
										id: 305,
										name: '女包',
										icon: 'https://images.unsplash.com/photo-1566150905458-1bf1fc113f0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aGFuZGJhZ3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 306,
										name: '男包',
										icon: 'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YmFja3BhY2t8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
									}
								]
							}
						]
					},
					{
						id: 4,
						name: '配饰',
						banner: 'https://images.unsplash.com/photo-1635767798638-3e7209f2294b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fGFjY2Vzc29yaWVzfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60',
						children: [
							{
								name: '配饰',
								children: [
									{
										id: 401,
										name: '项链',
										icon: 'https://images.unsplash.com/photo-1599643477877-530eb83abc8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmVja2xhY2V8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 402,
										name: '手表',
										icon: 'https://images.unsplash.com/photo-1524805444758-089113d48a6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8d2F0Y2h8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 403,
										name: '眼镜',
										icon: 'https://images.unsplash.com/photo-1577803645773-f96470509666?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c3VuZ2xhc3Nlc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
									}
								]
							}
						]
					},
					{
						id: 5,
						name: '美妆',
						banner: 'https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YmVhdXR5JTIwcHJvZHVjdHN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=60',
						children: [
							{
								name: '护肤',
								children: [
									{
										id: 501,
										name: '面膜',
										icon: 'https://images.unsplash.com/photo-1570194065650-d99fb4ee5b57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2UlMjBtYXNrfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 502,
										name: '洁面',
										icon: 'https://images.unsplash.com/photo-1556228720-195a672e8a03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGNsZWFuc2VyfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
									}
								]
							},
							{
								name: '彩妆',
								children: [
									{
										id: 503,
										name: '口红',
										icon: 'https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bGlwc3RpY2t8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 504,
										name: '眼影',
										icon: 'https://images.unsplash.com/photo-1512496015851-a90fb38ba796?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZXllc2hhZG93fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
									}
								]
							}
						]
					},
					{
						id: 6,
						name: '数码',
						banner: 'https://images.unsplash.com/photo-1468495244123-6c6c332eeece?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjd8fGdhZGdldHN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=60',
						children: [
							{
								name: '手机',
								children: [
									{
										id: 601,
										name: '手机',
										icon: 'https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8c21hcnRwaG9uZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 602,
										name: '手机壳',
										icon: 'https://images.unsplash.com/photo-1541877590-a0f06fc3e1d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGhvbmUlMjBjYXNlfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
									}
								]
							},
							{
								name: '电脑',
								children: [
									{
										id: 603,
										name: '笔记本',
										icon: 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bGFwdG9wfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 604,
										name: '平板',
										icon: 'https://images.unsplash.com/photo-1517430816045-df4b7de11d1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dGFibGV0fGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
									}
								]
							}
						]
					},
					{
						id: 7,
						name: '家居',
						banner: 'https://images.unsplash.com/photo-1616137422495-1e9e46e2aa77?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTl8fGhvbWUlMjBkZWNvcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60',
						children: [
							{
								name: '家纺',
								children: [
									{
										id: 701,
										name: '床品套件',
										icon: 'https://images.unsplash.com/photo-1522771739844-6a9f6d5f14af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8YmVkZGluZ3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 702,
										name: '抱枕',
										icon: 'https://images.unsplash.com/photo-1617325247661-675ab4b64ae2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHBpbGxvd3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
									}
								]
							},
							{
								name: '家具',
								children: [
									{
										id: 703,
										name: '沙发',
										icon: 'https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c29mYXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
									},
									{
										id: 704,
										name: '床',
										icon: 'https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YmVkfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60'
									}
								]
							}
						]
					}
				]
			}
		},
		computed: {
			currentCategory() {
				return this.categories[this.currentCategoryIndex];
			}
		},
		methods: {
			switchCategory(index) {
				this.currentCategoryIndex = index;
			},
			goToProductList(categoryId, categoryName) {
				uni.navigateTo({
					url: `/pages/product_list/product_list?id=${categoryId}&name=${categoryName}`
				});
			},
			loadMore() {
				// 实际应用中可以在这里加载更多数据
				this.isLoading = true;
				
				// 模拟加载过程
				setTimeout(() => {
					this.isLoading = false;
				}, 1000);
			}
		}
	}
</script>

<style lang="scss">
.container {
	background-color: #f8f8f8;
	min-height: 100vh;
}

.category-layout {
	display: flex;
	height: calc(100vh - 50px); // 减去底部导航高度
}

.category-menu {
	width: 90px;
	background-color: #f8f8f8;
	height: 100%;
}

.menu-item {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	text-align: center;
	
	&.active {
		background-color: #fff;
		
		.menu-text {
			color: #ff6b6b;
			font-weight: 500;
		}
		
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 10px;
			bottom: 10px;
			width: 3px;
			background-color: #ff6b6b;
			border-radius: 0 3px 3px 0;
		}
	}
}

.menu-text {
	font-size: 14px;
	color: #333;
	padding: 0 10px;
}

.category-content {
	flex: 1;
	background-color: #fff;
	height: 100%;
}

.category-banner {
	width: 100%;
	height: 120px;
}

.subcategory-section {
	padding: 10px;
}

.subcategory-group {
	margin-bottom: 15px;
}

.subcategory-title {
	font-size: 14px;
	font-weight: 500;
	color: #333;
	margin: 10px 0;
	padding-left: 10px;
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 2px;
		bottom: 2px;
		width: 3px;
		background-color: #ff6b6b;
		border-radius: 3px;
	}
}

.subcategory-list {
	display: flex;
	flex-wrap: wrap;
}

.subcategory-item {
	width: 33.33%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px 0;
}

.subcategory-icon {
	width: 50px;
	height: 50px;
	border-radius: 8px;
	margin-bottom: 5px;
}

.subcategory-name {
	font-size: 12px;
	color: #666;
}

.loading-more {
	text-align: center;
	padding: 15px 0;
	color: #999;
	font-size: 13px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading-icon {
	margin-right: 5px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.tab-placeholder {
	height: 50px;
}
</style> 